<template>
    <div class="detail">
        <ul >
            <li>
                <h2>{{info.empcount}}</h2>
                <p>总数</p>
                <i class="fa fa-user"></i>
                 <!-- <a v-if='title=="集团领导"' href="#/home/homepage?q=%E9%9B%86%E5%9B%A2%E9%A2%86%E5%AF%BC&leaderType=A" target='_blank'>详情
                    <i class="fa fa-arrow-circle-right"></i>
                 </a>
                 <a v-else-if='title=="集团高管"' href="#/home/homepage?q=%E9%9B%86%E5%9B%A2%E9%AB%98%E7%AE%A1&leaderType=B" target='_blank'>详情
                    <i class="fa fa-arrow-circle-right"></i>
                 </a>
                 <a v-else @click="showDialog('A')">
                    详情
                    <i class="fa fa-arrow-circle-right"></i>
                </a> -->
                <a @click="showDialog('D')">
                    详情
                    <i class="fa fa-arrow-circle-right"></i>
                </a>

            </li>
            <li>
                <h2>{{info.add_tomonempcount}}</h2>
                <p>本月新增</p>
                <i class="fa fa-user-plus"></i>
                <a @click="showDialog('A')">
                    详情
                    <i class="fa fa-arrow-circle-right"></i>
                </a>

            </li>
            <li>
                <h2>{{info.quitcount}}</h2>
                <p>本月离职</p>
                <i class="fa fa-user-times"></i>
                <a @click="showDialog('B')">
                    详情
                    <i class="fa fa-arrow-circle-right"></i>
                </a>
            </li>
            <li>
                <h2>{{info.transfercount}}</h2>
                <p>本月调动</p>
                <i class="fa fa-user-md"></i>
                <a @click="showDialog('C')">
                    详情
                    <i class="fa fa-arrow-circle-right"></i>
                </a>
            </li>
        </ul>

        <el-dialog  
          size=''
          :title="dialogTitle"  
          :visible.sync="dialogTableVisible"
          top='8vh'
          >
          <el-table
            :data="tableData"
            style="width:800px"
            stripe
            >
            <el-table-column property="emplid"  label="员工编号"></el-table-column>
            <el-table-column property="name" label="姓名"></el-table-column>
            <el-table-column property="dept_descr" width="300" label="所在部门"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button 
                   size="mini"
                   type="primary" @click="ComputedEmplid(scope)">{{userType=="U"?"员工履历信息":"干部任免审批表"}}</el-button>
              </template>
            </el-table-column>
          </el-table> 

    
          <el-pagination
              @current-change='currentChange'	
              :page-size="6"
              layout="total, prev, pager, next"
              :total="total"
               style='margin-top:20px;padding:0px;margin-left:-6px'
              >
            </el-pagination>
           <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogTableVisible = false">关闭</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
import Vue from "vue";
import { Table, TableColumn, Dialog, Button, Pagination } from "element-ui";
import URL from "../../common/js/dataLookUrl";
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Dialog);
Vue.use(Button);
Vue.use(Pagination);
export default {
  data() {
    return {
      dialogTableVisible: false,
      res: "",
      tableData: [],
      total: 0,
      types: "",
      dialogTitle: ""
    };
  },
  props: ["info", "title", "subhead","userType"],
  computed: {
    leaderType() {
      let leaderTypes = null;
      switch (this.title) {
        case "集团领导":
          leaderTypes = "A";
          break;
        case "集团高管":
          leaderTypes = "B";
          break;
        default:
          break;
      }
      return leaderTypes;
    }
  },

  methods: {
    ComputedEmplid : function(data){
      if(this.userType=="U")
      {
        localStorage.setItem('resumeType',2)
        localStorage.setItem('em',data.row.emplid)

         window.open('module/resume.html');
      }
      else 
      {
        localStorage.setItem('em_leader',data.row.emplid)

        window.open('module/leaderAppoint.html');
      }
	  },
    showDialog(types) {
      if (types) {
        this.types = types;
        switch (types) {
          case "A":
            this.dialogTitle = `${this.title} - ${this.subhead || ''} - 本月新增列表`;
            break;
          case "B":
            this.dialogTitle = `${this.title} - ${this.subhead || ''} - 本月离职列表`;
            break;
          case "C":
            this.dialogTitle = `${this.title} - ${this.subhead || ''} - 本月调动列表`;
            break;
          default:
            break;
        }
      }

      if (this.subhead) {
        let params = {
          type: this.types,
          deptCategory: this.subhead,
          pageNum: 1,
          pageSize: 6
        };

        this.Axios.Post(URL.getquarterTypeBydata.url, params).then(res => {
          this.tableData = res.data.datas;
          this.total = res.data.total;
        });
      } else {
        let params = {
          type: this.types,
          leaderType: this.leaderType,
          pageNum: 1,
          pageSize: 6
        };

        this.Axios.Post(URL.getKanTypeBydata.url, params).then(res => {
          this.tableData = res.data.datas;
          this.total = res.data.total;
        });
      }

      this.dialogTableVisible = true;
    },

    currentChange(data) {
      if (this.subhead) {
        let params = {
          type: this.types,
          deptCategory: this.subhead,
          pageNum: data,
          pageSize: 6
        };

        this.Axios.Post(URL.getquarterTypeBydata.url, params).then(res => {
          this.tableData = res.data.datas;
          this.total = res.data.total;
        });
      } else {
        let params = {
          type: this.types,
          leaderType: this.leaderType,
          pageNum: data,
          pageSize: 6
        };

        this.Axios.Post(URL.getKanTypeBydata.url, params).then(res => {
          this.tableData = res.data.datas;
          this.total = res.data.total;
        });
      }
    }
  }
};
</script>

<style scoped>
a {
  cursor: pointer;
}
.detail {
  width: 100%;
}
.detail ul {
  overflow: hidden;
  width: 100%;
}

.detail ul li {
  float: left;
  height: 130px;
  margin-right: 4%;
  padding-left: 1.5%;
  padding-top: 10px;
  position: relative;
  width: 22%;
}
.detail ul li:first-of-type {
  background: #00c0ef;
}
.detail ul li:nth-of-type(2) {
  background: #00a65a;
}
.detail ul li:nth-of-type(3) {
  background: #f39c12;
}
.detail ul li:last-of-type {
  margin-right: 0;
  background: #dd4b39;
}

.detail li h2 {
  font-size: 38px;
  font-weight: bold;
  margin: 0 0 10px 0;
  white-space: nowrap;
  padding: 0;
  color: #fff;
}

.detail li p {
  color: #fff;
  margin: 0 0 10px;
  font-size: 15px;
}

.detail li a {
  width: 100%;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.15);
  text-align: center;
  padding: 3px 0;
  font-size: 14px;
}

.detail li a:hover {
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 1);
}

.detail li > i {
  transition: all 0.3s linear;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1110;
  font-size: 70px;
  color: rgba(0, 0, 0, 0.15);
}

.detail li > i:hover {
  font-size: 75px;
}
</style>